<template>
  <div class="page">
    <van-nav-bar title="修改密码" left-arrow @click-left="$router.go(-1)"/>
    <van-form class="page-content" :disabled="btnLoading" @submit="submit">
      <div class="list-item">
        <van-field required :rules="[ $check('', true) ]" label="原密码" placeholder="请输入" v-model="info.oldPassword"/>
      </div>
      <div class="list-item">
        <van-field required :rules="[ $check('密码至少为6位，由数字、字母和特殊符号组成', 'pass') ]" label="新密码" placeholder="请输入" v-model="info.newPassword"/>
        <van-field required :rules="[ $check('密码至少为6位，由数字、字母和特殊符号组成', 'pass') ]" label="确认密码" placeholder="请输入" v-model="info.confirmNewPassword"/>
      </div>

      <div style="margin: 1rem 16px 16px;">
        <van-button block type="info" :loading="btnLoading">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
      btnLoading: false
    };
  },
  methods: {
    submit() {
      let info = JSON.parse(JSON.stringify(this.info));
      if (info.newPassword != info.confirmNewPassword) {
        this.$toast('两次新密码输入不一致！');
        return ;
      }
      this.btnLoading = true;
      this.$axios.put('/api/login/password', { 
        query: { ...info, username: this.$store.state.userInfo.userName }
      }).then(res => { 
        this.btnLoading = false;
        this.$store.commit('exit');
        this.$toast('修改成功');
      }).catch(err => {
        this.btnLoading = false;
      });
    }
  },
  mounted() { 
  }
};
</script>